<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery.min.3.4.1.js"></script>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #f00;
        }

        .box2 {
            background-color: #00f;
        }
    </style>
</head>

<body>
    <button>添加类名一</button>
    <button>再次添加类名</button>
    <button>删除类名</button>
    <button>切换类名</button>
    <div></div>

    <script>
        //1. $('button').eq(0) .eq(0) 表示 选中 第零个按钮 （起始位置从零开始） eq的意思是 等于的意思
        $('button').eq(0).click(function () {
            // 给 DIV 添加 类名
            // .addClass('box1'); 设置类名 addClass 里面的类名 一定不要带点
            $('div').addClass('box1');

        })

        //2. 再次添加一个类名 
        $('button').eq(1).click(function () {
            //2.1 addClass 可以追加类名
            // $('div').addClass('box2');
            // 2.2 .addClass('box1 box2'); 参数可以写多类名 ， 类名与类名之间空格隔开
            $('div').addClass('box1 box2')
        })

        // 3. 删除类名
        $('button').eq(2).click(function () {
            $('div').removeClass('box2')
            // 删除 类名 参数可以写多类名 ， 类名与类名之间空格隔开
        })

        //4.切换类名
        $('button').eq(3).click(function () {
            // .toggleClass('box2'); 表示元素中如果 存在该类名 就删除该类名， 如果元素中没有该类名就添加该类名
            $('div').toggleClass('box2');
        })




    </script>



</body>

</html>